<template>
  <div class="light">
    <a-popover trigger="click" v-model:open="visible">
      <a-button type="ghost" class="bg-yellow-500 light">{{ t('闪灯') }}</a-button>
      <template #content>
        <a-card title="闪灯配置" class="w-[300px]">
          <a-form layout="vertical" :model="form" @submit="submit" :disabled="loading">
            <a-form-item :label="t('闪灯次数')" name="times">
              <a-input-number :min="1" v-model:value="form.times" class="w-[100%]"></a-input-number>
            </a-form-item>
            <a-form-item :label="t('颜色')" name="color">
              <local-options
                :option="SYSTEM_OPTION_TYPE.COLOR"
                v-model="form.color"
              ></local-options>
            </a-form-item>
            <a-button block type="primary" class="mt-4" htmlType="submit">{{ t('确定') }}</a-button>
          </a-form>
        </a-card>
      </template>
    </a-popover>
  </div>
</template>

<script setup lang="ts">
import { light } from '@/api/modules/esl/priceTag';
import { lightColor } from '../../data/options';
import { table } from '../../data/data';
import { notify } from '@/utils/common/common';
import { SYSTEM_OPTION_TYPE } from '@/enum/system';
const visible = ref();
interface Light {
  times: number;
  color: string;
}
const { t } = useI18n();
const loading = ref(false);
const form = ref<Light>({
  times: 3,
  color: '1',
});

const submit = async () => {
  loading.value = true;
  const { data } = await light({
    ...form.value,
    tags: table.value.keys,
  });
  notify(data);
  visible.value = false;
  loading.value = false;
};
</script>

<style lang="scss" scoped></style>
